<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom :isSpace="false" :isCircle="true" :isBlur="false"></HeadCustom>
		<view class="topic-head">
			<view class="fboxRow Ycenter">
				<image class="pic img_bg" :src="detail.topicPic" mode="aspectFill"></image>
				<view class="fboxCol flex1">
					<view class="title font34 fwb">#{{detail.topicTitle}}#</view>
					<view class="info font26 lh38"><text
							class="mr24">阅读{{detail.readingQuantity}}</text><text>讨论{{detail.discussQuantity}}</text>
					</view>
				</view>
			</view>
			<view class="introduction mt40 font26 lh38" v-if="detail.takeaway">导读：{{detail.takeaway}}</view>
		</view>

		<view class="topic-main fboxCol Ycenter">
			<view class="hd fboxRow Ycenter Xcenter">
				<u-tabs :list="navList" @change="navChange" :current="navIndex" keyName="name" lineWidth="30"
					lineColor="#E8CDA7" :activeStyle="{
					color: '#E8CDA7',
					fontWeight: 500,
					fontSize: '30rpx'
				}" :inactiveStyle="{
					color: '#6B707C',
					fontSize: '30rpx'
				}">
				</u-tabs>
			</view>
			<view class="bd mt32">
				<view v-for="(item, index) in listData" :key="index">
					<DynamicItem :innerData="item" type="topicDetails" @login="login" />
				</view>
				<u-loadmore fontSize="24rpx" :status="listConfig.loading" />
			</view>
		</view>

		<not-login ref="notLogin" />
	</view>
</template>

<script>
	import DynamicItem from '@/components/circle/dynamic-item.vue';
	import {
		topicDetail,
		cardHomeDynamic
	} from '@/api/card.js';
	export default {
		components: {
			DynamicItem
		},
		data() {
			return {
				theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
				linkData: {},
				detail: {},
				id: '',
				navIndex: 0,
				navList: [{
						name: '综合',
					},
					{
						name: '热门'
					}
				],
				listData: [],
				listConfig: {
					current: 1,
					size: 20,
					count: 0,
					loading: 'loadmore'
				},
			}
		},
		onLoad(option) {
			if (option && option.id) {
				this.id = option.id
				this.getDetail()
				this.getInit()
			}
		},
		methods: {
			login(){
				this.$refs.notLogin.openLogin({
					show: true,
					position: 'center'
				})
			},
			navChange(val){
				this.navIndex = val.index
				this.getInit()
			},
			// 详情
			getDetail() {
				topicDetail({
					topicId: this.id
				}).then(res => {
					this.detail = res.data
				})
			},
			getInit() {
				this.listConfig = {
					current: 1,
					size: 20,
					count: 0,
					loading: 'loadmore'
				}
				this.listData = []
				this.getDynamic()
			},
			getDynamic() {
				cardHomeDynamic({
					current: this.listConfig.current,
					size: this.listConfig.size,
					topicId: this.id,
					isHeatSort: this.navIndex
				}).then(res => {
					res.data.list.filter(item => {
						if (item.picture) {
							item.pictureList = item.picture.split(',')
						}
					})
					if (this.listData.length) {
						this.listData = this.listData.concat(res.data.list)
					} else {
						this.listData = res.data.list
					}
					this.listLoading(res)
				})
			},
			listLoading(res) {
				if (res.data.total == 0) {
					this.listConfig.loading = 'list-not'
				} else if (res.data.total < res.data.size || res.data.current * res.data.size >= res.data.total) {
					this.listConfig.loading = 'nomore'
				}
				this.listConfig.count = res.data.total
			},
			listMore() {
				const {
					current,
					size,
					count,
					loading
				} = this.listConfig
				if (loading == 'nomore') {
					return
				}
				if (current * size < count) {
					this.listConfig.current = current + 1
					this.getDynamic()
				} else {
					this.listConfig.loading = 'nomore'
				}
			},
		},
		onReachBottom() {
			this.listMore()
		},
		onPullDownRefresh() {
			this.getInit()
			uni.stopPullDownRefresh();//停止刷新
		},
	}
</script>

<style lang="scss" scoped>
	.topic-head {
		padding: 128rpx 40rpx 40rpx;
		background: url('https://ebc-prod.cdn.benwunet.com/back/topicBack.png') no-repeat top center/cover;
		color:var(--contentBgImageTitleColor)
	}

	.pic {
		width: 100rpx;
		margin-right: 24rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 2rpx solid #F7F9FF;
	}

	.title {
		line-height: 50rpx;
	}

	.topic-main {
	}

	.topic-main .hd {
		width: 750rpx;
	}

	.topic-main .bd {
		// width: 670rpx;
		padding: 0 24rpx;
	}
</style>